<!DOCTYPE html>
<html lang="en">

	<head>
		<? $this->load->view('includes/head'); ?>
	</head>

	<body class="iphone" id="play">
		
		<!-- <div style="position: absolute; display: none;">
			Alpha: <span id="alpha"></span><br />
			Beta: <span id="beta"></span><br />
			Gamma: <span id="gamma"></span><br />
			<span id="nb-shakes"></span>
		</div> -->
		
		<div class="phase" id="phase1">
			<h1 class="mast start-game">
				Start game
			</h1>
			
			<span class="loader"></span>
			 
		</div>
		
		<div class="phase" id="phase2">
			
			<h1 class="mast countdown">
				Let's Count Down
			</h1>
 
			<span id="counter"></span>
		</div>
		
		<div class="phase" id="phase3">
			<h1 class="mast shake-it">
				Shake it
			</h1>
			<div class="separator"></div>

			<div id="sugar-level-aim"></div>
			<div id="sugar-level"></div>

			<div id="tea" class="liquid-wrapper tea">
				<h1 class="mast want-tea">
					I want tea
				</h1>
				<div class="liquid tea"></div>
			</div>

			<div id="coffee" class="liquid-wrapper coffee">
				<h1 class="mast want-coffee">
					I want coffee
				</h1>
				<div class="liquid coffee"></div>
			</div>
		</div>
		
		<div class="phase" id="phase4">
			<h1 class="mast results-waiting">
				Waiting for results
			</h1>
			<span class="loader"></span>
		</div>
		
		<div class="phase" id="phase5">

			<div id="winner">
				<h1 class="mast">
					The person that serves your tea or coffee
				</h1>
				<span id="loser-name"></span>
		 		<div class="profile-pic">
		 			<img src="<?=site_url('assets/img/layout/profile_pic.png')?>" alt="wacko-jacko" />	
		 		</div>
				
			 
				
			</div><!-- #winners -->
			
			<div id="loser">
				<h1 class="mast">
					You have to serve
				</h1>
				
				<ul>
					<li>
						Name
						<span>Order</span>
					</li>
				</ul>
				<ul id="winner-list">

				</ul>
			</div><!-- #loser -->
			
		</div>
		
	</body>
</html>
